<template>
  <div class="_wz_contractsAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="110" :rules="ruleValidate">
      <Row>
        <i-col span="12">
          <FormItem label="运输企业" prop="deptUuid">
            <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" :label-in-value="true" clearable>
              <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="从业身份" prop="driverTypeCode">
            <i-select v-model="formData.driverTypeCode" filterable placeholder="请选择从业身份" :label-in-value="true" clearable>
              <Option v-for="item in personType" :value="item.code" :key="item.code">{{ item.value }}</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="合同期限" prop="employContentLimit">
            <i-input v-model.number="formData.employContentLimit" type="number" placeholder="请填写合同期限" clearable />
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="印章状态" prop="signatureState">
            <i-select v-model.number="formData.signatureState" filterable placeholder="请选择印章状态" clearable>
              <Option :value="0">禁用</Option>
              <Option :value="1">开启</Option>
            </i-select>
          </FormItem>
        </i-col>
      </Row>

      <FormItem label="聘用合同" prop="employContent">
        <tinymce :htmlData="formData.employContent" :height="500" @tinymceData="val => formData.employContent = val"></tinymce>
      </FormItem>
      <FormItem label="承诺书" prop="promiseContent">
        <tinymce :htmlData="formData.promiseContent" :height="500" @tinymceData="val => formData.promiseContent = val"></tinymce>
      </FormItem>
      <FormItem label="责任状" prop="dutyContent">
        <tinymce :htmlData="formData.dutyContent" :height="500" @tinymceData="val => formData.dutyContent = val"></tinymce>
      </FormItem>
      <FormItem label="告知书" prop="noticeContent">
        <tinymce :htmlData="formData.noticeContent" :height="500" @tinymceData="val => formData.noticeContent = val"></tinymce>
      </FormItem>
      <div class="demo-drawer-footer" style="z-index: 3;">
        <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>


  </div>
</template>
<script>


import tinymce from "../../components/table/tinymce";

  export default {
    components: {
      tinymce
    },
    props: ["selectData"],//接收来自父组件的数据
    data() {
      return {
        uploadProgress: 0,//文件上传进度
        personType:[],
        subDeptList: [],//运输企业
        formData: {
          newsState:0
        },//表单数据
        ruleValidate: {//正则
          deptUuid: [
            {required: true, message: '请选择运输企业', trigger: 'blur'}
          ],
          driverTypeCode: [
            {required: true, message: '请选择从业身份', trigger: 'blur'}
          ],
          employContentLimit: [
            {type:'number',required: true, message: '请填写合同期限', trigger: 'blur'}
          ],
          signatureState: [
            {type:'number',required: true, message: '请选择印章状态', trigger: 'blur'}
          ],
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;

      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
          if (!!!that.formData.deptUuid) {
            that.formData.deptUuid = that.subDeptList[0].uuid;
            that.formData.deptName = that.subDeptList[0].deptName;
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })

      //从业类型
      that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'person_type'}).then(res => {
        if (!!res) {
          that.personType = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })

      if (!!that.selectData.id) {
        that.formData = that.selectData;//表单

      }
    },
    methods: {//执行的方法
      //提交表单
      addSubmit(data) {
        var that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用

            that.formData.driverTypeName = this.personType.filter(item => that.formData.driverTypeCode == item.code)[0].value;

            var data = that.formData;
            let formData = new FormData();
            for (let key in data) {
              formData.append(key, data[key]);
            }

            that.axios.post(that.apiUrl.coreDeptContractCoreDeptContractSaveOrUpdate,formData, that.public.parameterUploadProgress(that)).then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("保存成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_contractsAdd {
    .ql-container{
      height: 350px;
    }
  }



</style>
